/*
 *@description:资讯详情
 *@Author:@reynold
 *@Date:2025-03-22 11:08:12
 *@Update:2025-03-22 11:08:12
 *@Version: V1.0.0
*/

<template>
  <Card>
    <div class="detail-container">
      <h1 class="detail-title">{{ currentInfo.title }}</h1>
      <div class="detail-meta">
        <span>作者: {{ currentInfo.author }}</span>
        <span>发布时间: {{ currentInfo.publishTime }}</span>
      </div>
      <div class="detail-image">
        <img :src="currentInfo.image" alt="资讯图片">
      </div>
      <div class="detail-content">
        <p v-html="currentInfo.content"></p>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'

export default {
  data() {
    return {
      currentInfo: {
        title: "如何正确清洁大理石地板",
        author: "清洁小能手",
        publishTime: "2025-04-01 10:00:00",
        image: "https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%275riF5rSB55%2Bz5p2Q55So5riF5rSB6IaP6L%2BY5piv5riF5rSB57KJKOacgOacieaViOaenF8xNzMzNzA0NzIyLjYyMzU5OThfMTczMzcwNDcyMy4zMDY4ODA3%27/1.png", // 这里请替换为实际的图片链接
        content: "  大理石地板美观大方，但清洁时需要注意方法，本文将为您详细介绍如何正确清洁大理石地板，避免损伤。首先，需要准备合适的清洁工具，如柔软的拖把、中性清洁剂等。然后，按照正确的步骤进行清洁，避免使用过于尖锐的工具刮伤地板表面。最后，定期进行保养，可以让大理石地板保持光洁如新。"
      }
    }
  },
  components: {
    Card
  }
}
</script>

<style lang="less" scoped>
.detail-container {
  padding: 20px;
  height: 80vh; /* 设置固定高度，这里是视口高度的80%，你可以根据需要调整 */
  overflow-y: auto; /* 当内容超过高度时显示垂直滚动条 */
}

.detail-title {
  font-size: 28px;
  margin-bottom: 10px;
  text-align: center;
}

.detail-meta {
  margin-bottom: 15px;
  color: #666;
  text-align: center;
}

.detail-image {
  text-align: center;
  margin-bottom: 20px;
}

.detail-image img {
  max-width: 100%;
  height: auto;
}

.detail-content {
  line-height: 1.6;
  font-size: 16px;
}
</style>